import { useEffect, useState } from "react";
import _ from 'lodash';
import { resourcePath } from "../../../../../utils/resource";
import { Space } from "antd";

const toWeek = (day) => {

	switch (day) {
		case 1:
			return '星期一';
		case 2:
			return '星期二';
		case 3:
			return '星期三';
		case 4:
			return '星期四';
		case 5:
			return '星期五';
		case 6:
			return '星期六';
		case 0:
			return '星期日';
		default:
			return '';
	}
}

export default function Left() {
	const [date, setDate] = useState(new Date());

	const currentMinutes = date.getMinutes();

	useEffect(() => {
		const interval = setInterval(() => {
			const newDate = new Date();
			const minutes = newDate.getMinutes();
			if (minutes !== currentMinutes) {
				setDate(newDate);
			}
		}, 1000);
		return () => {
			clearInterval(interval);
		}
	}, [currentMinutes])
	return (
		<div className="layout-h center fill w0" style={{
			overflow: "hidden",
			whiteSpace: 'nowrap',
			width: "14vw",
			height: "5vh",
			display: "flex", // 设置为 flex 布局
			flexDirection: "column", // 设置为垂直方向布局
			justifyContent: "center",
			alignItems: "flex-start",
		}}>

			<div className="layout-h center" style={{
				width: "7vw",
				fontSize: "0.9vw",
				height: "2.5vh", // 修改盒子高度为固定值
				display: "flex", // 设置为 flex 布局
				//flexDirection: "column", // 设置为垂直方向布局
				justifyContent: "center", // 垂直居中对齐
				alignItems: "left", // 水平居中对齐
			}}>
				{/* <SvgIcon type="icon-calendar"></SvgIcon> */}
				<img alt={"calendar"} src={resourcePath.calendarPng} style={{
					width: "1.5vw",
					height: "auto",
				}} />
				<div className="pdl5 bold" style={{
					// fontSize: 18,
					//fontFamily: 'sans-serif',

					padding: 0,
				}}>
					<span style={{}}>{date.getFullYear()}/{_.padStart(date.getMonth() + 1, 2, '0')}/{_.padStart(date.getDate(), 2, '0')}</span>
					{/* <span className="pdl5">{toWeek(date.getDay())}</span> */}
				</div>
			</div>

			<div className="layout-h center" style={{
				whiteSpace: 'nowrap',
				width: "7vw",
				height: "2.5vh",
				fontSize: "0.9vw",
				display: "flex", // 设置为 flex 布局
				justifyContent: "center", // 垂直居中对齐
				//alignItems: "center", // 水平居中对齐
			}}>
				{/* <SvgIcon type="icon-clock"></SvgIcon> */}
				<img alt={"clock"} src={resourcePath.clockPng} style={{
					width: "1.5vw",
					height: "auto",
				}} />
				<span className="pdl5 bold" style={{
					padding: 0,
				}}>{toWeek(date.getDay())}</span>
				<div className="pdl5 bold" style={{
					// fontSize: 20,
					//fontFamily: 'sans-serif',

					padding: 0,
				}}>
					{_.padStart(date.getHours(), 2, '0')}:{_.padStart(date.getMinutes(), 2, '0')}
				</div>
			</div>

		</div>
	);
}
